<template>
  <yt-page title="选择检查内容" :leftData="leftData">
    <yt-textarea v-model="inputValue">
      <div class="flex">
        <h5>手动录入</h5>
        <yt-btn size="mini">确认</yt-btn>
      </div>
    </yt-textarea>
    <yt-checkList class="list" :list="contents" label="des" val="id" v-model="contentSelect" pos="right" simple></yt-checkList>
    <div class="fixed-br">
      <div class="btn-circle">
        <i class="iconfont icon-check-gou"></i>
      </div>
      <div class="btn-circle">
        <i class="iconfont icon-list-san"></i>
        <span class="badge">5</span>
      </div>
    </div>
    <yt-popup pos="bottom" v-model="bottom" :mask="false" fixed>
      <div> 这里是自定义内容 </div>
    </yt-popup>
  </yt-page>
</template>

<script>
export default {
  data() {
    return {
      leftData: [
        {
          font: 'iconfont icon-left',
          click: () => {
            this.$router.$back()
          }
        }
      ],
      tabs: 0,
      contentSelect: [],
      contents: [],
      inputValue: '',
      bottom: false
    }
  },
  activated() {
    this.contents = [
      { id: 1, des: '依法通过有关安全生产行政审批的情况' },
      { id: 2, des: '有关人员的安全生产教育和培训、考核情况' }
    ]
  }
}
</script>

<style lang="stylus" scoped>
.flex
  display flex
  justify-content space-between
  align-items center

>>>.yt-textarea-title
  .yt-button
    background none
    padding 0
    border none
    color #46baff
    font-size 15px
    margin 0

.btn-circle
  position relative
  display flex
  justify-content center
  align-items center
  width 45px
  height 45px
  border-radius 50%
  background rgba(0, 0, 0, 0.5)
  margin-bottom 10px

  .iconfont
    font-size 26px
    color #fff

  .badge
    position absolute
    top 0
    right -5px
    min-width 10px
    min-height 10px
    text-align center
    border-radius 50%
    background-color red
    color #fff
    font-size 10px
    padding 4px
</style>
